<div class="row" >
    <div class="large-2 columns" style="width:20%;background:none;position:fixed;right:30.98rem;bottom:0;z-index:999999999999;border-radius:.3rem .3rem 0 0;">
        <?php $this->view->partial('common/user_chat') ?>
    </div>
    <div class="large-2 columns" style="width:20%;background:none;position:fixed;right:14.99rem;bottom:0;z-index:999999999999;border-radius:.3rem .3rem 0 0;">
    	<?php $this->view->partial('common/user_chat') ?>
    </div>

    <div class="lgchat large-12 columns">
    	<div class="chathead large-12 column">
    	</div>

    	<div class="chattent large-12 column hide">
    		<div class="chat-in large-12 column">
    			<div class="chat-search large-12 column">
    			<form>
    			  <div class="row collapse">
    			    <div class="small-3 large-2 columns">
    			      <span class="prefix" style="border:none;"><i class="fa fa-search"></i></span>
    			    </div>
    			    <div class="small-9 large-10 columns">
    			      <input type="text" ifu7y7cdoth67placeholder="Search" style="border:none;">
    			    </div>
    			  </div>
    			  </form>

    			</div>
    			<div id="chat_box_container" class="chat-ul large-12 column">
    			   	<div class="chat-li large-12 column chat_member">
    					<div class="chat-tmb large-1 column " style="background:url(img/user_dp/a8.jpg);background-size:cover;"></div>
    					<div class="large-8 end column">
    						<a>Nash Troll</a>
    						<p><small>Chatting</small></p>
    					</div>
    				</div> 
    			</div>    		
    		</div>
    	</div>

    <div class="chatfoot large-12 column">
    	<strong><i class="fa fa-weixin"></i> <a>Chat</a></strong>&nbsp;&nbsp;<small><span id="chat_online"></span></small>
    </div>
    </div>
</div>

<script type="text/javascript">
	function animationClick(element, animation) {
    element = $('.chatfoot');
    one = $('.chattent');
    element.click(
        function() {
        	if(one.hasClass('hide'))
        	{
        		one.removeClass('hide');  	
        	}
        	else
        	{
        		one.addClass('hide');  	
        	}	
        	
			/*$('.chathead').addClass('animated ' + animation);    

            window.setTimeout( function(){
                $('.chathead').removeClass('animated ' + animation);
            }, 2000);  */       
  
        });	
    $('.chathead').click(
        function() {
        	
        	one.addClass('hide');   

    });
}
</script>

<script type="text/javascript">
  function animationx(elemental, animations){
    elemental = $('.max-chat');
    two = $('.discon');
    min = $('.min-chat');
    elemental.click(
        function() {
            if(two.hasClass('hide'))
            {
                two.removeClass('hide');    
            }
            else
            {
                two.addClass('hide');   
            }   
 			/* two.addClass('animated ' + animations);    

            window.setTimeout( function(){
                two.removeClass('animated ' + animations);
            }, 2000);    */     
        }); 
    min.click(
        function() {
             two.addClass('hide');         
    });
}
</script>




<script type="text/javascript">
	$(document).ready(function() {

	    $('.chathead').each(function() {
	        animationClick(this, 'tada'); });

        $('.discon').each(function() {
        	animationx(this, 'pulse'); });

	});
</script>


<script type="text/javascript" src="<?=BASE_URI?>js/chat.js"></script>